在不改变原来图片大小的情况下，剪切有几个方法（每种方法都要把img包在一个元素内来定位）：

1.用margin给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;
overflow: hidden;/设置溢出隐藏/
}
img#usemargin{
margin:-40px -40px -40px -40px;
}
</style>

demo1

2.用absolute给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;
overflow: hidden;/设置溢出隐藏,必需/
position: relative;/必需！/
}
img#useabsolute{
position:absolute;/必需！/
top:-40px;
right:-50px;
}
</style>

demo2

3.用clip给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;

position: relative;/必需！/
}
img#useclip{
position:absolute;/必需！/
clip: rect(20px 225px 200px 55px);

}
img#withoutclip{
opacity:0.4;
}
</style>

demo3

4.用clip给背景切图

<style>

div{
float:left;
margin-right: 20px;
}
div#noclip{
background:url(2.jpg) no-repeat;
width:400px;
height:300px;
opacity:0.5;

}
div#clip{
background:url(2.jpg);
width:400px;
height:300px;
text-align: center;
line-height: 130px;
border:1px solid white;
opacity:1;
/使用clip的条件是position:absolute，父元素则为position:relative/
position: absolute;
clip:rect(50px 250px 150px 50px);
/注意，在IE8以及其以下的版本，在使用clip属性时需要注意语法：clip (top,right,bottom,left);/
}

</style>

demo4

 

 

5.显然，最好用的就是clip方法了